<template>
	<view class="container">
		<view style="height: 60rpx;"></view>
		<view class="listView">
			<view style="height: 1rpx;"></view>
			<view class="listFor">
				<block v-for="(item,index) in list" :key="index">
					<view v-if="listId !== item.id" class="listItem" @click.stop="listClick(item)"
						:style="agent_level_id === item.id?'background-color: #00C82E;color: #fff;':'background-color: #EFEFEF;'">
						<view style="text-align: center;">
							<view class="foSi30">{{ item.name }}</view>
							<view class="foSi25" style="margin-top: 10rpx;" >￥{{ item.upgrade_pay_money }}</view>
						</view>
					</view>
				</block>
			</view>
			<view style="height: 20rpx;"></view>
		</view>
		<view class="tui-tabbar">
			<view class="totalPrice tui-pr-20">
				<view class="tui-price-large tui-color-red">
					<text class="pricetitle">实付金额:</text>
					<text>￥{{money}}</text>
				</view>
			</view>
			<view class="paybuttbox tui-pr25 tui-flex-end">
				<tui-button class="paybutt" height="70rpx" :size="28" type="danger" shape="circle" @click="btnPay">
					确认支付
				</tui-button>
			</view>
		</view>
		<t-pay-way :show="show" :amuont="money" @goPay="goPay"
			:paymethod="paymethod" @close="popupClose"></t-pay-way>
	</view>
</template>

<script>
	import tPayWay from "@/components/views/t-pay-way/t-pay-way"
	import pay from '@/common/pay.js'
	export default {
		components: {
			tPayWay
		},
		data() {
			return {
				list: [],
				money: 0.00,
				paymentType: 0,
				paymethod: {},
				agent_level_id: 0,
				listId: 0,
				show: false
			}
		},
		onLoad: function(e) {
			let _this = this
			_this.$request.get('Order.paymethod').then(res => {
				if (res.errno == 0) {
					_this.paymethod = res.data;
					_this.paymentType = res.data[0].default;
					//console.log(_this.paymentType);
				}
			});
			_this.$request.post('agent.lists').then(res => {
				if (res.errno == 0) {
					_this.list = res.data.list;
					_this.agent_level_id = res.data.my_agent_level_id;
					_this.listId = _this.agent_level_id;
				}
			});
		},
		onShow: function(e) {},
		methods: {
			listClick(item){
				var _this = this;
				_this.agent_level_id = item.id;
				_this.money = item.upgrade_pay_money;
			},
			btnPay() {
				var _this = this;
				if (_this.agent_level_id == _this.listId) {
					uni.showModal({
						title: '请选择升级等级',
						showCancel: false
					})
				}else{
					_this.show = true
				}
			},
			popupClose() {
				this.show = false
			},
			goPay(e) {
				if (e.paymentType) {
					this.paymentType = e.paymentType;
				}
				this.createOrder();
			},
			createOrder: function() {
				var _this = this;
				
				if (_this.paymentType == 0) {
					uni.showModal({
						title: '支付方式错误',
						content: res.msg,
						showCancel: false
					})
					return;
				}
				let postData = {
					agent_level_id: _this.agent_level_id,
					payment: _this.paymentType
				};
				_this.$request.post('agent.create', postData).then(res => {
					if (res.errno != 0) {
						uni.showModal({
							title: '错误',
							content: res.msg,
							showCancel: false
						})
						return;
					}
					const redirectUrl = "/pagesA/my/fx/index";
					if (_this.paymentType == 'wx_pay') {
						console.log(res.data);
						pay.wxpay('agentlevel', res.data.total, res.data.id, redirectUrl);
					} if (_this.paymentType == 'balance_pay') {
						_this.$request.post('agent.pay', {
							orderid: res.data.id
						}).then(res => {
							if (res.errno == 0) {
								wx.showModal({
									title: '成功',
									content: '使用余额支付成功',
									showCancel: false,
									success: function(res) {
										wx.redirectTo({
											url: redirectUrl
										});
									}
								})
							} else {
								wx.showModal({
									title: '失败',
									content: res.msg,
									showCancel: false
								})
							}
						})
					}
			
				})
			},
		}
	}
</script>

<style>
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
	.tui-tabbar {
		width: 100%;
		height: 118rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}
	
	.listView{
		width: 90%;
		margin: auto;
		background-color: #FFF;
		border-radius: 20rpx;
	}
	
	.listFor{
		width: 90%;
		margin: auto;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.foSi30{
		font-size: 30rpx;
	}
	
	.foSi25{
		font-size: 25rpx;
	}
	
	.listItem{ 
		width: 32%;
		height: 140rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		margin-right: 1.33%;
	}
	
	.totalPrice {
		padding-top: 10rpx;
		width: 70%;
	}
	.tui-price-large {
		font-size: 34rpx;
		line-height: 34rpx;
		font-weight: 600;
		padding-left: 12rpx;
	}
	
	.tui-color-red,
	.tui-invoice-text {
		color: #E41F19;
		padding-right: 30rpx;
	}
	
	.pricetitle {
		font-size: 30rpx;
		color: #333333;
	}
	
	.paybuttbox {
		width: 30%;
	}
	
	.paybutt {
		width: 100%;
	}
	
	.agreement {
		color: #666666;
		padding-top: 6rpx;
	}
	
	.tui-pr-20 {
		padding-left: 20rpx;
	}
	
	.tui-pr25 {
		padding-right: 25rpx;
	}
</style>
